<template>
  <el-tabs class="el-tabs-style"  @tab-click="method.changeType"  >
    <el-scrollbar class="scrollbar-flex-content" >
      <el-tab-pane  v-for="(item) in state.articleGroup" :label="item.group" >

        <el-card v-if="!inisHelper.isEmpty(state.article)" v-for="(item2) in state.article" :key="state.article.id" @click="method.articleToDetail(item2.id)" ref="articleCard" style="margin-bottom: 30px; " >
          <el-skeleton  :loading="state.isLoading" animated>
            <template #template>
              <div class="row" >
                <div  class="col-md-5">
                  <div class="img">
                    <el-skeleton-item variant="image" style="height: 180px; width: 100%;max-height: 100%" />
                  </div>
                </div>
                <div  class="col-md-7" >
                  <div class="contents" >
                    <el-skeleton-item variant="h3" style="width: 50%" />
                    <div class="align-items-center py-2 white-space-nowrap" style="font-size: 12px;color: #6C757D" >
                      <el-skeleton-item variant="text" style="width: 80%" />
                    </div>
                    <div class="align-items-center" style="border-radius: 6px;"  >
                      <el-skeleton-item variant="text" style="width: 100%;height: 60px; " />
                    </div>
                    <div class="align-items-center" >
                      <el-skeleton-item variant="text" style="width: 100%; height: 30px; max-width: 500px; border-radius: 12px;margin-top: 12px "/>
                    </div>
                  </div>
                </div>
              </div>
            </template>

            <template #default>
              <div class="subject-card row" >
                <div  class="col-md-5">
                  <div class="img"  >
                    <el-image  style="height: 180px; width: 100%;max-height: 100%" :src="formatUrl(item2.covers)"  alt="404NotFound"/>
                  </div>
                </div>
                <div  class="col-md-7" >
                  <div class="contents" >
                    <div class="title" style="font-weight: bolder;font-size: 20px" >{{item2.title}}</div>
                    <div class="align-items-center py-2 white-space-nowrap" style="font-size: 12px;color: #6C757D" >
                      <span> <el-icon><Pointer /></el-icon> 点赞：{{item2.likes}}</span> <span class="text-muted mx-2 h-14px w-2px bg-light">|</span>
                      <span> <el-icon><Discount /></el-icon> 标签： <a v-for="item3 in item2.labels"  :key="item2.labels.id" style="margin-left: 5px; color: #40a9ff"> {{item3.label}}</a>   </span> <span class="text-muted mx-2 h-14px w-2px bg-light">|</span>
                      <span> <el-icon><Calendar /></el-icon> 时间：{{formatDateTime(item2.createTime)}}</span><span class="text-muted mx-2 h-14px w-2px bg-light">|</span>
                      <span> <el-icon><View /></el-icon> 访问：{{item2.views}}</span>
                    </div>
                    <div class="align-items-center" style="background-color: #fafafa; border-radius: 6px;"  >
                      <p>{{item2.synopsis}}</p>
                    </div>
                    <div class="align-items-center" >
                      <el-button color="#f3d19e"  aria-disabled="false" class="" style="width: 100%; max-width: 500px; border-radius: 12px;margin-top: 12px " ><span style="color:#e6a23c;" ><el-icon><ZoomIn /></el-icon >查看更多</span> </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-skeleton>
        </el-card>

        <el-card v-else>
          <empty ></empty>
        </el-card>

        <div class="d-flex"  style="align-items: center;flex-direction: column;" v-if="item.group !== '推荐'" >
          <el-pagination background layout="prev, pager, next"
                         :page-size="state.pageSize"
                         :current-page="state.pageNum"
                         :total="state.total"
                         @size-change="method.handleSizeChange"
                         @current-change="method.handleCurrentChange"
          />
        </div>
      </el-tab-pane>
    </el-scrollbar>
  </el-tabs>
</template>

<script setup >
import {useRouter} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import {useArticleStore} from "@/store/modules/article";
import {selectPageArticles} from "@/api/artcle/article";
import {useUserStore} from "@/store/modules/user";
import {formatDateTime, formatUrl} from "@/utils/tools/format";
import {Calendar, Discount, Pointer, View} from "@element-plus/icons-vue";
import Empty from "@/components/empty/empty.vue";
import {inisHelper} from "@/utils/helper";
const router = useRouter();
const articleStore = useArticleStore();
const userStore = useUserStore();
const articleCard =ref(null);
const  state = reactive({
  pageNum: 1,
  pageSize: 3,
  total:3,
  isData:false,
  isLoading:false,
  articleGroup:{},
  articleMap: new Map(),
  pageNumMap:new Map(),
  article:{},
  groupName:""
})
const method ={
  inis: async()=>{
    // 获取文章分组
    await articleStore.getArticleGroup().then(()=>{
      state.articleGroup = articleStore.getGroup;
      //获取文章数据
      method.getArticle(state.articleGroup[0].group)
      state.groupName =state.articleGroup[0].group;
    });
  },
  getArticle(groupName){
    state.isLoading =true;
    selectPageArticles(userStore.id||1,groupName,state.pageNum,state.pageSize).then((res)=>{
      state.articleMap.set(groupName,res.data);
      state.article = res.data.rows;
      state.total = res.data.total;
      state.isLoading =false;
    })
    // console.log(state.article)
  },
  //监听标签选项变化
  changeType (tab,even) {
    //更新文章类型
    const groupName = tab.props.label;
    state.groupName = groupName;
    // 变化标签时初始分页数
    state.pageNum=1;
    state.pageSize=3;
    if (!state.articleMap.has(groupName)){
       method.getArticle(groupName);
    }else {
      state.article = state.articleMap.get(groupName).rows;
      state.total = state.articleMap.get(groupName).total;
     }
    console.log(state.article)
  },
  // 跳转到文章详情
   articleToDetail:(id)=>{
    router.push({
      path:"/index/article/detail",
      query:{
        id:id
      }
    })
  },
  // // 设置文章样式
  // articleCardStyle(){
  //   // articleCard.value.classList.toggle('article-card')
  //   console.log(articleCard.value)
  // },
  handleSizeChange: (val)=>{    //切换每页数据大小
    state.pageSize = val;
  },
  handleCurrentChange:(val)=>{  //切换页码
    state.pageNum = val;
    method.getArticle(state.groupName);
  },
}
onMounted(()=>{
  method.inis(); //初始化项目
})
</script>


<style scoped>

.article-card-grid{
  max-width: 300px;
}
.article-card-row{
  max-width: 100%;
}
>>>.tabs__header{
  z-index: 999;
}

.search{
  position: absolute;
  right: 5px;
  top: -30px;
  z-index:1000;
}
</style>
